<template>
  <scroll-view class="flex-col page mine" scroll-y @scroll="onPageScroll">
    <view class="flex-col section" :style="{ paddingTop: navHeight + 'px' }">
      <xlm-top-nav :scrollTop="scrollTop" title="活动列表" />
      <view v-for="(item, idx) in eventList" :key="idx" class="event-card" @click="toEventDetails(item)">
        <view class="event-img-wrap">
          <!-- <VideoPlayer :src="item.videoSrc" :poster="item.videoPoster" /> -->
           <image 
             :src="getImageUrl(item.master_image)" 
             class="event-img" 
             mode="aspectFill"
             @error="(e) => onImageError(e, item)"
             @load="(e) => onImageLoad(e, item)"
           />
          <view class="event-status" :class="item.status=='notstart'?'status-signup':item.status=='signup'?'status-signup':item.status=='progress'?'status-progress':item.status=='end'?'status-end':''">
            <image :src="imgUrl + 'triangle-right.png'" class="status-icon" />
            <text>{{ getEventStatusText(item.status) }}</text>
          </view>
        </view>
        <view class="event-content">
          <view class="event-title">{{ item.name }}</view>
          <view class="event-info">
            <image :src="imgUrl + 'clock.png'" class="info-icon" />
            比赛日期：{{ formatTime(item.competition_time) }}　{{ getEventTypeText(item.type) }}
          </view>
          <view class="event-info">
            <image :src="imgUrl + 'calendar.png'" class="info-icon" />
            截止日期：{{ formatTime(item.deadline) }}
          </view>
        </view>
      </view>
    </view>
    <!-- <movable-area class="movable-area">
      <movable-view class="fab-container" direction="all" :x="x" :y="y">
        <image :src="imgUrl + 'customerService2.png'" class="fab-icon" />
      </movable-view>
    </movable-area> -->
  </scroll-view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { useOutsideAppStore } from '@/store/app'
  import { imgUrl } from '@/utils/config'
  import VideoPlayer from '@/components/VideoPlayer/VideoPlayer.vue'
  import { useRequest } from '@/api';
  import { getEventTypeText, getEventStatusText } from '@/utils/statusUtils.js'
  import { formatTime } from '@/utils/dateUtils.js'
  const appStore = useOutsideAppStore()
  const navHeight = computed(() => appStore.navHeight)
  const scrollTop = ref(0)
  const onPageScroll = (e) => {
    scrollTop.value = e.detail.scrollTop
  }
  const { API_ACT_INDEX_POST } = useRequest();
  const eventList = ref([
    {
      videoSrc: 'https://www.w3schools.com/html/mov_bbb.mp4',
      videoPoster: 'https://img1.imgtp.com/2023/09/13/4QwQv1Qe.jpg',
      img: 'https://img1.imgtp.com/2023/09/13/4QwQv1Qe.jpg',
      title: '草源体育公开赛田径运动 · 郑州站',
      date: '2025.10.12',
      type: '田径',
      endDate: '2025.12.12 12:00:00'
    },
    {
      videoSrc: 'https://www.w3schools.com/html/mov_bbb.mp4',
      videoPoster: 'https://img1.imgtp.com/2023/09/13/4QwQv1Qe.jpg',
      img: 'https://img1.imgtp.com/2023/09/13/4QwQv1Qe.jpg',
      title: '草源体育公开赛田径运动 · 郑州站',
      date: '2025.10.12',
      type: '田径',
      endDate: '2025.12.12 12:00:00'
    }
  ])
  
  // 图片加载状态管理
  const imageLoadStates = ref({})
  onShow(() => {
    getEventList();//获取活动列表
    console.log(1233);
    
  })
  const getEventList = async () => {
    let params = {
      page: 1,
      page_size: 10
    }
    
    // 先置空数据
    eventList.value = [];
    
    try {
      console.log(777777);
      
      const res = await API_ACT_INDEX_POST(params);
      console.log(8888888);
      
      console.log('getEventList', res)

      if (res.code === 1) {
        if (res.data && res.data.data && res.data.data.length > 0) {
          eventList.value = res.data.data;
        } else {
          // 如果没有数据，保持空数组
          eventList.value = [];
        }
      } else {
        // API返回错误时，保持空数组并显示错误信息
        eventList.value = [];
        uni.showToast({ title: res.msg || '获取数据失败', icon: 'none' })
      }

    } catch (error) {
      // 网络错误时，保持空数组并显示错误信息
      eventList.value = [];
      console.error('getEventList error:', error);
      uni.showToast({ title: error.message || '网络请求失败', icon: 'none' })
    }
  }
  

  // const videoSrc = 'https://www.w3schools.com/html/mov_bbb.mp4' // 示例视频地址
  // const videoPoster = imgUrl + 'soccer1.jpg' // 示例封面
  const toEventDetails = (item) => {
    uni.navigateTo({
      url: `/pages/eventActivity/eventActivityDetail/index?id=${item.id}`
    })
  }
  
  // 图片加载错误处理
  const onImageError = (e, item) => {
    console.log('图片加载失败:', item)
    // 设置加载状态为失败
    imageLoadStates.value[item.id] = 'error'
    // 可以在这里设置默认图片
  }
  
  // 图片加载成功处理
  const onImageLoad = (e, item) => {
    console.log('图片加载成功:', item)
    // 设置加载状态为成功
    imageLoadStates.value[item.id] = 'loaded'
  }
  
  // 获取图片URL，处理默认图片
  const getImageUrl = (imageUrl) => {
    if (!imageUrl) {
      return imgUrl + 'default-event.png'
    }
    
    // 如果是相对路径，添加基础URL
    if (imageUrl.startsWith('/')) {
      return imgUrl + imageUrl.substring(1)
    }
    
    // 如果是完整URL，直接返回
    if (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) {
      return imageUrl
    }
    
    // 默认添加基础URL
    return imgUrl + imageUrl
  }

  // 测试富文本内容
  const testHtmlContent = '<p>这是<span class="text-right">详情</span></p>'
  
  // 更多测试用例
  const testCases = [
    '<p>左对齐文本</p>',
    '<p><span class="text-center">居中对齐文本</span></p>',
    '<p><span class="text-right">右对齐文本</span></p>',
    '<p>这是<span class="text-right text-red">红色右对齐</span>文本</p>',
    '<p><span class="text-bold">粗体文本</span></p>',
    '<p><span class="text-blue">蓝色大字体</span></p>'
  ]
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>